<template>
  <div class="container">
        <div class="remain-wrapper">
          <header class="remain">
              <p class="remain-title">余额</p>
              <p class="remain-count">￥{{user.balance}}</p>
          </header>
          <div class="merchant-type">
              <div @click="goTodo">
                <div class="merchant-toto-at">
                  <div class="merchant-todo-action">
                    <img src="http://img.uuuda.com/wxapp/todo.png" width="28px">
                    <div class="merchant-todo">{{needOpNum}}</div>
                  </div>
                  <div class="merchant-todo-fz">待处理</div>
                </div>
              </div>
              <div @click="showCode">
                <div class="merchant-toto-at">
                    <div class="merchant-todo-action">
                      <img src="http://img.uuuda.com/wxapp/validate.png" width="28px">
                    </div>
                    <div class="merchant-todo-fz">验码</div>
                </div>
              </div>
              <div @click="goComment">
                  <div class="merchant-toto-at">
                    <div class="merchant-todo-action">
                      <img src="https://uuuda.oss-cn-beijing.aliyuncs.com/wxapp/user-comment.png" width="28px">
                    </div>
                    <div class="merchant-todo-fz">用户评价</div>
                </div>
              </div>
          </div>
        </div>
        <div class="merchant-title vertical-center justify-center">
            店铺订单
        </div>
        <div class="merchant-bd">
            <header class="merchant-class-header">
                <div class="merchant-class-cell all" :class="{active: activeStatus === 'all'}" @click="changeStatus('all')">
                    全部订单
                </div>
                <div class="merchant-class-cell" :class="{active: activeStatus === 'new'}" @click="changeStatus('new')">
                    新订单
                </div>
                <div class="merchant-class-cell" :class="{active: activeStatus === 'finish'}" @click="changeStatus('finish')">
                    已完成
                </div>
                <div class="merchant-class-cell" :class="{active: activeStatus === 'refund'}" @click="changeStatus('refund')">
                    已退款
                </div>
            </header>
            <div class="merchant-cell-card" :key="item.id" v-for="item in showOrders">
                <div class="clearfix">
                    <div class=" title-fz-color fl">{{item.name}}</div>
                    <div class="subtitle-fz-color fr">{{item.statusName}}</div>
                </div>
                <div class="clearfix">
                    <div class=" desc-fz-color fl">订单编号:{{item.orderNo}}</div>
                </div>
                <div class="clearfix">
                        <div class=" desc-fz-color fl">下单时间：{{item.payTime}}</div>
                        <div class="price-fz-color fr">￥{{item.clearPrice}}</div>
                    </div>
            </div>
        </div>
        <div class="dialog" v-show="codeDialog">
          <div class="dialog-bd">
            <div class="dialog-bd-title">
              输入消费码
            </div>
            <div class="dialog-bd-code">
              <vue-input-code span-size="20px" type="text" :number="4" height="50px" span-color="#4c4c4c" input-color="#4c4c4c" input-size="24px" :code="code"></vue-input-code>
              <div class="code-error" v-show="errorCode">
                暂无该消费码，请您核实后再输入
              </div>
            </div>
            <div class="dialog-bd-op clearfix">
              <div class="dialog-cancel fl" @click="codeDialog = false">
                取消
              </div>
              <div class="dialog-check fl" @click="validate">
                核验
              </div>
            </div>
          </div>
        </div>
        <div class="dialog" v-show="susccessDialog">
          <div class="dialog-bd diloag-success">
              <div class="dialog-success-show">
                <div class="dialog-center">
                  <img src="https://uuuda.oss-cn-beijing.aliyuncs.com/wxapp/wechat-pay.png" width="72px">
                  <div>
                    消费核验成功
                  </div>
                </div>
              </div>
            <div class="dialog-success-code">
                订单金额已存入您的钱包余额，可提现可在已完成订单内查看订单详情。
            </div>
            <div class="dialog-footer">
              <div @click="susccessDialog = false">
                知道了
              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
let axios = require("axios");
let qs = require("qs");
axios.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";

export default {
  data() {
    return {
      codeDialog: false,
      activeStatus: "all",
      code: [],
      all: [],
      finish: [],
      needOpNum: "",
      new: [],
      refund: [],
      showOrders: [],
      openid: "",
      sessionKey: "",
      token: "",
      errorCode: false,
      susccessDialog: false,
      user: {}
    };
  },
  methods: {
    goTodo() {
      this.$router.push({
        name: "Todo",
        params: {
          token: this.token
        }
      });
    },
    goComment() {
      this.$router.push({
        name: "Comment",
        params: {
          score: this.user.score,
          token: this.token
        }
      });
    },
    showCode() {
      this.codeDialog = true;
      this.errorCode = false;
    },
    changeStatus(status) {
      this.activeStatus = status;
      this.showOrders = this[status];
    },
    codeTransOrder() {
      let self = this;
      let code = this.code;
      let data = {
        openid: this.openid,
        sessionKey: this.sessionKey,
        token: this.token,
        code: code.join("")
      };
      return axios({
        method: "GET",
        url: "/merchantcenter/codeorder",
        params: data
      });
    },
    validate() {
      let self = this;
      let code = this.code;
      let data = {
        openid: this.openid,
        sessionKey: this.sessionKey,
        token: this.token,
        code: code.join("")
      };
      this.codeTransOrder()
        .then(function(res) {
          let orders = res.data.data
          if (orders.length == 0) {
            return self.errorCode = true
          }
          data.orderNo = orders[0].orderNo
          return axios({
            method: "post",
            url: "/merchantcenter/codeexchange",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            data: qs.stringify(data)
          });
        })
        .then(function(res) {
          if (res.data.errno != 200) {
            return self.errorCode = true
          }
          self.codeDialog = false;
          self.errorCode = false;
          self.showSuccess();
        });
    },
    showSuccess() {
      let self = this;
      self.susccessDialog = true;
    },
    parseUrl() {
      let url = location.href;
      let u = url.split('#')[0]
      let data = qs.parse(u.split("?")[1]);
      let token = data.token;
      let sessionKey = data.sessionKey;
      let openid = data.openid;
      this.token = token;
      this.sessionKey = sessionKey;
      this.openid = openid;
    }
  },
  created() {
    let self = this;
    self.parseUrl();
    axios({
      method: "get",
      url: "/merchantcenter/index",
      params: {
        openid: this.openid,
        sessionKey: this.sessionKey,
        token: this.token
      }
    }).then(function(res) {
      if (res.data.errno !== 200) {
        return self.$dialog.toast({
            mes: res.data.msg,
            timeout: 1500,
            icon: "error"
          });
      }
      let data = res.data.data;
      self.all = data.all;
      self.showOrders = data.all;
      self.finish = data.finish;
      self.needOpNum = data.needOpNum;
      self.new = data.new;
      self.refund = data.refund;
      self.user = data.user;
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
